<template>
  <!--<h1>个人信息：</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <button @click="count++">{{count}}</button>
  <button @click="addAge">增加年龄</button>
  <HelloWorld @hello="showMsg" msg="你好"/>
  <h2>全名:{{person2.fullName}}</h2>

  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我+1</button>

  <h2>当前的信息为：{{msg}}</h2>
  <button @click="msg+='！'">修改信息</button>
  <button @click="person.age++">年龄+1</button>
  <button @click="person3.job.salary++">工资+1</button>
  <Test />
  <Demo />
  <Demo2 />
  <Demo3 />
  <Demo4 />
  <Demo5 />
  <Child />
  <Child2 />

  <Suspense>
    <template #default>
      <Child3 />
    </template>
    <template #fallback>
      <h3>稍等，加载中...</h3>
    </template>
  </Suspense>-->

  <!--pinia
  <h1>Pinia&#45;&#45;购物车展示</h1>
  <hr>
  <h2>商品列表</h2>
  <ProductList />
  <hr>
  <ShoppingCart />-->

  <!--<div class="routeContainer">
    <h1 class="title">hello App!</h1>
    <div>
      <router-link :to="{name:'login'}">go to Login</router-link>&emsp;
      <router-link :to="{name:'register'}">go to register</router-link>&emsp;
      <a href="/login">go to Login</a>&emsp;
      <a href="/register">go to Register</a>&emsp;
      <button @click="toRoute('/login')">登录</button>&emsp;
      <button @click="toRoute('/register')">注册</button>&emsp;
      <button @click="router.go(1)">前进</button>&emsp;
      <button @click="router.back()">后退</button>
    </div>
    <div class="list">
      <ul>
        <li @click="toDetail({brand:'小米',price:'2999',id:'1'})">手机</li>
        <li @click="toDetail({brand:'苹果',price:'14999',id:'2'})">电脑</li>
        <li @click="toDetail({brand:'华为',price:'4999',id:'3'})">平板</li>
      </ul>
    </div>
  </div>-->

  <router-view></router-view>
</template>

<script setup lang="ts">
  import {ref,reactive,computed,watch,watchEffect,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,provide,defineAsyncComponent} from 'vue'
  import {useRouter} from 'vue-router'
  import type {Ref} from 'vue'
  import HelloWorld from './components/HelloWorld.vue'
  import Test from './components/Test.vue'
  import Demo from './components/Demo.vue'
  import Demo2 from './components/Demo2.vue'
  import Demo3 from './components/Demo3.vue'
  import Demo4 from './components/Demo4.vue'
  import Child from './components/Child.vue'
  import Demo5 from './components/Demo5.vue'
  import Child2 from './components/teleport/Child.vue'
  import ProductList from './components/ProductList.vue'
  import ShoppingCart from './components/ShoppingCart.vue'
  import Login from './components/Login.vue'
  import Register from './components/Register.vue'
  const Child3 = defineAsyncComponent(() => import('./components/suspense/Child.vue'))
  // let name:Ref<string | number> = ref('张三')
  interface Person {
    name:string,
    age:number
  }
  let name = ref<string | number>('张三')
  let count = ref(0)
  name.value  = 1
  const person:Person = reactive({
    name:'张三',
    age:19
  })
  const addAge = () => {
    person.age++
  }
  const showMsg = (value:string) => {
    console.log('触发了hello事件，接收的参数是：' + value)
  }
  const person2 = reactive({
    firstName:'李',
    lastName:'四',
  })
  // person2.fullName = computed<string>(() => {
  //   return person2.firstName + '-' + person2.lastName
  // })
  person2.fullName = computed<string>({
    get(){
      return person2.firstName + '-' + person2.lastName
    },
    set(value){
      const nameArr = value.split('-')
      person2.firstName = nameArr[0]
      person2.lastName = nameArr[1]
    }
  })

  let sum = ref<number>(0)
  let msg = ref<string>('你好')
  // watch
  // 1.监视ref所定义的一个响应式数据
  /*watch(sum,(newVal,oldVal) => {
    console.log('sum变了',newVal)
  },{immediate:true})*/

  // 2.监视ref所定义的多个响应式数据
  /*watch([sum,msg],(newVal,oldVal) => {
    console.log('sum或者msg变了',newVal)
  },{immediate:true})*/

  // 3.监视reactive所定义的一个响应式数据的全部属性
  // (1)此处无法正确的获取oldValue
  // (2)强制开启了深度监视（deep配置无效）
  /*watch(person,(newVal) => {
    console.log('person变了',newVal)
  },{immediate:false})*/

  // 4.监视reactive所定义的一个响应式数据中的某个属性
  /*watch(() => person.age,(newVal) => {
    console.log('person变化了',newVal)
  })*/

  // 5.监视reactive所定义的一个响应式数据中的某些属性
  /*watch([() => person.name,() => person.age],(newVal) => {
    console.log('person变化了',newVal)
  })*/

  //特殊情况
  /* watch(()=>person.job,(newValue,oldValue)=>{
      console.log('person的job变化了',newValue,oldValue)
  },{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效 */

  let person3 = reactive({
    name:'zs',
    age:20,
    job:{
      salary:16
    }
  })

  watchEffect(() => {
    const x = sum.value
    const y = person3.job.salary
    console.log('watchEffect所指定的回调执行了')
  })


  // 生命周期
  onBeforeMount(() => {
    console.log('onBeforeMount')
  })
  onMounted(() => {
    console.log('onMounted')
  })
  onBeforeUpdate(() => {
    console.log('onBeforeUpdate')
  })
  onUpdated(() => {
    console.log('onUpdated')
  })
  onBeforeUnmount(() => {
    console.log('onBeforeUnmount')
  })
  onUnmounted(() => {
    console.log('onUnmounted')
  })

  let car = reactive({name:'长安逸动',price:'100000'})
  provide('car',car)

  // 路由跳转
  const router = useRouter()
  const toRoute = (route:string) => {
    // router.push(route)
    router.push({
      path:route
      // name:'register'
    })
    // router.replace()
  }

  interface Item {
    brand:string,
    price:string,
    id:string
  }

  const toDetail = (item:Item) => {
      router.push({
        // path:'/register',
        // query:item
        name:'register',
        params:{
          id:item.id
        }
      })
  }

</script>

<style scoped lang='less'>
  .routeContainer {
    text-align: center;
    padding-top:100px;
    .title {
      margin-bottom:50px;
    }
    div {
      margin-bottom:50px;
    }
    .list ul li {
        cursor: pointer;
        margin-bottom:10px;
      }
  }
</style>
